import ImageOrIcon from '@/components/ImageOrIcon';
import pUnselected from '@/images/cart/unselected.svg';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useEffect } from 'react';
import { DistributionWayMap } from '../constant';
import styles from './index.module.scss';

const DeliveryWay = ({ className = '', distributionWayList, value, onChange }) => {
  // 设置默认 配送方式
  useEffect(() => {
    if (!distributionWayList) {
      return;
    }

    if (!distributionWayList.length) {
      Taro.showToast({
        title: '该店铺没有可选的配送方式',
        duration: 3000,
        icon: 'none',
      });

      return;
    }

    onChange(distributionWayList[0]);
  }, [distributionWayList]);

  if (!distributionWayList?.length || distributionWayList.length < 2) {
    return null;
  }

  return (
    <View className={`${styles.DeliveryWay} ${className}`}>
      <View className="label">配送方式：</View>

      <View className="way-list">
        {distributionWayList?.map((item) => {
          return (
            <View
              className="way"
              key={item}
              onClick={() => {
                onChange(item);
              }}
            >
              <ImageOrIcon
                {...{
                  className: 'icon',

                  name: value === item && 'icon_chose',
                  size: 36,

                  src: pUnselected,
                }}
              />
              <View className="name">{DistributionWayMap[item]}</View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default DeliveryWay;
